<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <ui:composition template="./BannersAndMenusTemplate.jsf">

            <ui:define name="content"> 

                <h:form id="carForm">  
                    <p:fieldset legend="Select Type">
                        <h:outputLabel/> 
                        <p:selectOneMenu id="type" value="#{user.type}" maxlength="15">  
                            <f:selectItem itemLabel="Select Type" itemValue="" /> 
                            <f:selectItems value="#{user.types}" />  
                            <p:ajax listener="#{user.renderType()}" update=":carForm"/>
                        </p:selectOneMenu>  
                        <p:outputLabel value="Example: "/><p:outputLabel value="#{user.refExample}"  style="font-size: large" escape="false"/>
                    </p:fieldset>
 
                    <p:fieldset legend="Available Elements" style="margin-top:20px">  

                        <p:dataGrid id="availableCars" var="Element"  
                                    value="#{user.getCarsSmall()}" columns="3">  

                            <p:column>  

                                <p:panel id="pnl" header="#{Element.toString()}" style="text-align:center;" >   
                                </p:panel>  
             
   
                                <p:draggable for="pnl" revert="true"  
                                             handle=".ui-panel-titlebar" stack=".ui-panel"/>  

                            </p:column>  

                        </p:dataGrid>  

                    </p:fieldset>  

                    <p:fieldset id="selectedCars" legend="Selected Elements" style="margin-top:20px">  

                        <p:outputPanel id="dropArea">  

                            <h:outputText value="!!!Drop here!!!"  
                                          rendered="#{empty user.droppedCars}"  
                                          style="font-size:24px;" />  

                            <p:dataTable id="dataTable2" var="Element" value="#{user.droppedCars}"  
                                         rendered="#{not empty user.droppedCars}" selection="#{user.selectedCar}" selectionMode="single"  rowKey="#{Element.id}">   

                                <p:ajax event="rowSelect" listener="#{user.onRowSelectFORDETAIL}"    
                                        update=":carForm:dataTable2" />   
                                <p:ajax event="rowUnselect" listener="#{user.onRowUnselectFORDETAIL}" update=":carForm:dataTable2"/>  
 
                                <f:facet name="footer">  
                                    <p:commandButton  disabled="#{not user.renderOnRowSelectFORDETAIL}" value="Remove" icon="ui-icon-close"
                                                      action = "#{user.offCarDrop}" update=":carForm"/>   
                                    <p:commandButton  disabled="#{not user.renderOnRowSelectFORDETAIL}" value="Bold" icon="ui-icon-close"
                                                      action = "#{user.carBold()}" update=":carForm"/> 
                                    <p:commandButton  disabled="#{not user.renderOnRowSelectFORDETAIL}" value="Underline" icon="ui-icon-close"
                                                      action = "#{user.carUnderline()}" update=":carForm"/> 
                                    <p:commandButton  disabled="#{not user.renderOnRowSelectFORDETAIL}" value="Italic" icon="ui-icon-close"
                                                      action = "#{user.carItalic()}" update=":carForm"/> 
                                </f:facet> 

                                <p:column headerText="Elements">  
                                    <h:outputText value="#{Element.toString()}" escape="false"/>   
                                </p:column>  
                                
                                 <p:column headerText="Bold">  
                                    <h:outputText value="#{user.converBooleanToHuman(Element.bold)}" escape="false"/>   
                                </p:column> 

                                <p:column headerText="Underlined">  
                                    <h:outputText value="#{user.converBooleanToHuman(Element.underline)}" escape="false"/>   
                                </p:column> 
                                
                                <p:column headerText="Italic">  
                                    <h:outputText value="#{user.converBooleanToHuman(Element.italic)}" escape="false"/>   
                                </p:column> 

                            </p:dataTable>   
                        </p:outputPanel>  

                    </p:fieldset>  

                    <p:droppable for="selectedCars" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="availableCars">   
                        <p:ajax listener="#{user.onCarDrop}" update="carForm" />   
                    </p:droppable>  



                </h:form>  


            </ui:define> 

        </ui:composition>
    </h:body>
</html>

